<template>
    <div>
        <el-container>
            <el-main>
                <div class="report">
                    <p>
                        问卷结果
                    </p>
                </div>
                <div clss="report-info-body">
                    <div>
                        <el-table fixed :data="reportForm.slice((currentPage-1)*PageSize,currentPage*PageSize)" stripe style="width: 100%" max-height="500">
                            <el-table-column prop="score" label="分数" align="center"></el-table-column>
                            <el-table-column prop="stu_name" label="姓名" align="center"></el-table-column>
                            <el-table-column prop="time" label="时间" align="center"></el-table-column>
                            <el-table-column prop="status" label="问题类型" align="center"></el-table-column>
                            <el-table-column align="center" label="操作" fixed="right" width="200">
                                <template #default="scope">
                                    <el-button size="mini" type="primary" @click="lookForm(scope.$index, scope.row)" style="background-color: #409EFF;border-color: #409EFF;color:#fff;">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="block">
                        <el-pagination
                                :hide-on-single-page="value"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="PageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="reportForm.length">
                        </el-pagination>
                    </div>
                    </div>
                </div>
                <div>
                    <el-dialog title="问卷结果" v-model="dialogTableVisible" :before-close="handleClose">
                        <el-form :model="formData">
                            <el-form-item label="分数" prop="score" style="width: 80%;" >
                                <el-input name="score" v-model="formData.score" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="姓名" prop="stu_name" style="width: 80%;">
                                <el-input name="stu_name" v-model="formData.stu_name" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="咨询次数" prop="time" style="width: 80%;">
                                <el-input name="time" v-model="formData.time" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="问题类型" prop="status" style="width: 80%;">
                                <el-input name="status" v-model="formData.status" disabled></el-input>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import request from "../../utils/request";


    export default {
        name: "Result",
        data(){
            return{
                disabled:true,
                dialogTableVisible : false,

                currentPage:1,
                PageSize:10,
                reportForm:[{
                    score:'',
                    stu_name:'',
                    time:'',
                    status:''
                }],
                formData:{
                    score:'',
                    stu_name:'',
                    time:'',
                    status:''
                }
            }
        },

        methods :{

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.PageSize = val
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val
            },


            lookForm : function (index,row) {
                this.dialogTableVisible = true;
                this.formData = Object.assign({},row);
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },


            getResult(){
                return request({
                    url:'/api/questionnaire',
                    method:'get'
                })
            },
            //获取数据
            getData(){
                this.getResult().then(res => {
                    if(res.code ===1) {
                        this.reportForm = res.data;
                        console.log(res.data)
                    }
                })
            },
        },
        created() {
            this.getData()
        }
    }
</script>

<style scoped>
    .report {
        width: auto;
        height: 56px;
        background-color: #EDEFF2;
        font-size: 22px;
        /* font-family: SimHei; */
        font-weight: 400;
        color: #333333;
        line-height: 48px;
        border-left: 6px solid #409EFF;
        text-align: left;
    }
</style>